import {
  Button, Card, Form, Input,
} from 'antd'
import { FC, useCallback } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { Link, useHistory, withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import actions from '../../store/authority/actions'

const bj = require('../../assets/bj.png')

const StyledLogin = styled.div`
height: 100%;
position: relative;
background-image: url(${bj});
  .ant-card{
    width: 380px;
    height: 420px;
    text-align: center;
    position: absolute;
    right: 80px;
    top: 150px;
    .ant-card-head-title{
      font-size: 28px;
      color: #FF0033;
      font-weight: 700;
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    }
    .ant-card-body{
      margin-top: 30px;
    }
    .btn{
      margin-right: 20px;
    }
  }
`
interface IValues {
  adminname: string,
  password: string,
}
const AppLogin: FC = (props) => {
  const history = useHistory()
  const { loginAction } = props
  console.log('1111', props)
  const onFinish = useCallback((values :IValues) => {
    loginAction(values).then(() => {
      history.replace('/')
    })
  }, [])
  return (
    <StyledLogin>
      <Card title="餐饮美食商家后台系统" bordered>
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="adminname"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
            <Button type="primary" htmlType="submit" className="btn">
              登录
            </Button>
            <Link to="register" style={{color: "#ccc"}}>
              去注册
            </Link>
          </Form.Item>
        </Form>
      </Card>
    </StyledLogin>
  )
}

export default connect(null, (dispatch) => bindActionCreators(actions, dispatch))(AppLogin)
